<template>
  <div class="flexContent1">
    <!-- <div class="form"> -->
    <el-form ref="scmForm" :rules="scmRules" :disabled="routerType === 'detail'" :model="scmForm"
      class="demo-form-inline form" label-position="right" label-width="140px">
      <div class="top">

        <div class="basic">供应商基本信息</div>
        <el-row :gutter="24" type="flex" class="marginBtm">
          <el-col :span="8">
            <el-form-item label="名称：" prop="name">
              <el-input v-clearEmoji v-model.trim="scmForm.name" style="width: 90%;" placeholder="请输入..." />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="编号：" prop="supplierNum">
              <el-input v-clearEmoji v-model.trim="scmForm.supplierNum" style="width: 90%;" placeholder="请输入..." />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="级别：" prop="level">
              <el-select v-model="scmForm.level" style="width: 90%;" popper-class="eloption">
                <el-option v-for="(val, key) in levelList" :key="key" :value="key" :label="val" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="8">
            <el-form-item label="省市区域：" prop="region">
              <el-cascader ref="cascaderAddr" v-model="scmForm.selectedOptions" style="width: 90%;" :options="options"
                placeholder="请选择地区" filterable expand-trigger="hover" @change="handleChange" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="详细地址：" prop="address">
              <el-input v-clearEmoji v-model.trim="scmForm.address" style="width: 90%;" placeholder="请输入..." />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行名称：" prop="opendBank">
              <el-input v-clearEmoji v-model.trim="scmForm.opendBank" style="width: 90%;"
                :placeholder="routerType === 'detail' ? '' : '请输入'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="8">
            <el-form-item label="联系电话：" prop="linkPhone">
              <el-input v-clearEmoji v-model.trim="scmForm.linkPhone" style="width: 90%;" placeholder="请输入..." />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人：" prop="linkPerson">
              <el-input v-clearEmoji v-model.trim="scmForm.linkPerson" style="width: 90%;" placeholder="请输入..." />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行账号：" prop="bankCard">
              <el-input v-clearEmoji v-model.trim="scmForm.bankCard" style="width: 90%;"
                :placeholder="routerType === 'detail' ? '' : '请输入'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="16">
            <el-form-item label="备注信息：" prop="remark">
              <el-input v-clearEmoji v-model.trim="scmForm.remark" style="width: 100%;"
                :placeholder="routerType === 'detail' ? '' : '请输入'" />
            </el-form-item>
          </el-col>

        </el-row>
      </div>
      <div class="center">
        <div class="basic">供应商业务信息</div>
        <div style="flex:1">
          <el-row :gutter="24" type="flex">
            <el-col :span="8">
              <el-form-item label="供应商类型：" prop="type">
                <el-radio-group v-model="scmForm.type" size="small">
                  <el-radio label="0">供应商</el-radio>
                  <el-radio label="1">生产厂家</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结算方式：" prop="settlementMethod">
                <el-radio-group v-model="scmForm.settlementMethod" size="small">
                  <el-radio label="0">账期</el-radio>
                  <el-radio label="1">后台扣率</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="付款日：" prop="payDate">
                每月 <el-input v-clearEmoji v-model.trim="scmForm.payDate" style="width: 70%;" placeholder="请输入..." /> 号
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" type="flex">
            <el-col :span="8">
              <el-form-item label="供应商状态：" prop="status">
                <el-radio-group v-model="scmForm.status" size="small">
                  <el-radio label="0">合作中</el-radio>
                  <el-radio label="1">已终止</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供货方式：" prop="supplyMethod">
                <el-radio-group v-model="scmForm.supplyMethod" size="small">
                  <el-radio label="0">经销</el-radio>
                  <el-radio label="1">代销</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="btnDiv">
          <el-button v-if="routerType === 'add' || routerType === ''" class="submitBtn" style="width: 88px;"
            @click.stop="addScm">确定</el-button>
          <el-button v-if="routerType === 'edit'" class="submitBtn" style="width: 88px;"
            @click.stop="updateScm">提交</el-button>
          <el-form v-if="routerType === 'detail'" ref="scmForm1">
            <el-form-item>
              <el-button v-if="routerType === 'detail'" class="celBtn" style="width: 88px;"
                @click.stop="returnBtn">返回</el-button>
            </el-form-item>
          </el-form>
          <el-button v-if="routerType !== 'detail'" class="celBtn" style="width: 88px;"
            @click.stop="cancelBtn">取消</el-button>
        </div>
      </div>
    </el-form>
    <!-- </div> -->
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { addScmInfo, getScmInfo, updateScmInfo } from '@/api/scm'
import { getSupplierLevel } from '@/api/dictionary'
export default {
  name: 'SupplierAdd',

  data() {
    return {
      routerType: 'add',
      scmId: '',
      options: regionData,
      selectedOptions: [],
      selectedOptionsForm: {
        province: '',
        county: '',
        area: ''
      },
      addtions: {
        names: ''
      },
      scmForm: {
        selectedOptions: [],
        address: '', //
        bankCard: '',
        level: '',
        linkPerson: '',
        linkPhone: '',
        name: '',
        opendBank: '',
        payDate: '',
        region: '',
        regionCode: '',
        remark: '',
        settlementMethod: '',
        status: '',
        supplierNum: '',
        type: '',
        supplyMethod: ''
      },
      scmRules: {
        name: [{
          required: true,
          message: '请输入供应商名称',
          trigger: 'change'
        }, {
          min: 0,
          max: 30,
          message: '供应商名称长度不能超过20个字符',
          trigger: 'change'
        }],
        linkPerson: [
          {
            required: true,
            message: '请输入联系人',
            trigger: 'change'
          }, {
            min: 0,
            max: 20,
            message: '联系人长度不能超过20个字符',
            trigger: 'change'
          }, {
            pattern: /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/,
            message: '联系人只能输入汉字',
            trigger: 'change'
          }
        ],
        linkPhone: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'change'
        },
        {
          pattern: /^1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
          message: '请输入正确的手机号',
          trigger: 'change'
        }
        ],
        address: [{
          required: true,
          message: '请输入详细地址',
          trigger: 'change'
        },
        {
          min: 0,
          max: 30,
          message: '详细地址不能超过30个字符',
          trigger: 'change'
        },
        {
          // pattern 正则表达式
          pattern: /^[^\’\<\>\%\&\{\}\￥\@\$\'\"\【\】\\\/\ ]*$/,
          message: '详细地址不能为特殊字符',
          trigger: 'change'
        }
        ],
        remark: [{
          min: 0,
          max: 100,
          message: '备注不能超过100个字符',
          trigger: 'change'
        }
        ],
        type: [{
          required: true,
          message: '请选择供应商类型',
          trigger: 'change'
        }],
        settlementMethod: [{
          required: true,
          message: '请选择结算方式',
          trigger: 'change'
        }],
        payDate: [{
          required: true,
          message: '请输入付款日',
          trigger: 'change'
        }, {
          pattern: /^30$|^31$|^([1-2]\d)$|^[1-9]?$/,
          message: '付款日只能输入1-31',
          trigger: 'change'
        }],
        level: [
          {
            required: true,
            message: '请选择供应商级别',
            trigger: 'change'
          }
        ],
        supplierNum: [{
          required: true,
          message: '请输入供应商编号',
          trigger: 'change'
        }, {
          pattern: /^[A-Za-z0-9]+$/,
          message: '供应商编号只能输入数字或字母',
          trigger: 'change'
        },
        {
          min: 0,
          max: 10,
          message: '供应商编号最多输入10个字符',
          trigger: 'change'
        }],
        opendBank: [
          {
            pattern: /^((?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])|(\d))+$/,
            message: '开户行名称只能输入数字或字母',
            trigger: 'change'
          }
        ],
        bankCard: [{
          pattern: /^\d[\d\s]+\d$/,
          message: '银行账号只能输入数字',
          trigger: 'change'
        }],
        region: [{
          required: true,
          message: '请选择区域',
          trigger: 'change'
        }],
        status: [{
          required: true,
          message: '请选择供应商状态',
          trigger: 'change'
        }],
        supplyMethod: [{
          required: true,
          message: '请选择供货方式',
          trigger: 'change'
        }]
      },
      shopId: '',
      levelList: []
    }
  },
  watch: {

  },
  created() {
    this.init();
    this.getSupplierLevel()
    this.routerType = this.$route.query.type ? this.$route.query.type : 'add'
    this.scmId = this.$route.query?.id
    if (this.scmId) {
      console.log(this.scmId)
      this.getScmDetail()
    }
  },
  methods: {
    init() {
      this.scmForm = {
        selectedOptions: ["410000", "410100", "410105"],
        address: '金科智汇谷', //
        bankCard: '',
        level: '1',
        linkPerson: '测试',
        linkPhone: '18866666666',
        name: '',
        opendBank: '',
        payDate: '5',
        region: '河南省/郑州市/金水区',
        regionCode: '410000,410100,410105',
        remark: '',
        settlementMethod: '0',
        status: '0',
        supplierNum: '',
        type: '0',
        supplyMethod: '0'
      }
    },
    async getSupplierLevel() {
      const res = await getSupplierLevel()
      if (res.code === 200) {
        this.levelList = res.data
        // console.log(this.levelList, '级别')
      }
    },
    async getScmDetail() {
      const res = await getScmInfo({ id: this.scmId })
      console.log(res)
      if (res.code === 200) {
        const data = res.data
        this.scmForm = data
        // this.scmForm.selectedOptions = data.store.selectedOptionsId.split(',')
        // this.scmForm.userName = data.store.userName
        console.log('供应商', data)
      } else {
        // this.$message.error(res.message)
      }
    },
    // 获取省市区
    handleChange(value) {
      console.log(123123123);
      this.scmForm.selectedOptions = value
      console.log(this.scmForm.selectedOptions)
      var name = ''
      this.scmForm.selectedOptions.map(item => { name += CodeToText[item] + '/' }) // 将省市区三个拼接一起
      this.addtions.names = name
      console.log(this.addtions.names) // 运用了CodeToText把编码转成了中文
      this.selectedOptionsForm.province = CodeToText[this.selectedOptions[0]]
      this.selectedOptionsForm.county = CodeToText[this.selectedOptions[1]]
      this.selectedOptionsForm.area = CodeToText[this.selectedOptions[2]]

      console.log(this.selectedOptionsForm)
      this.scmForm.region = this.addtions.names
    },
    // 添加供应商
    addScm() {
      console.log(this.scmForm)
      this.$refs.scmForm.validate(async (isOk) => {
        if (isOk) {
          // 去除银行卡号中间空格
          this.scmForm.bankCard = this.trimAll(this.scmForm.bankCard);
          const res = await addScmInfo(this.scmForm)
          console.log(res.code)
          if (res.code === 200) {
            this.$message.success('添加成功')
            this.$refs.scmForm.resetFields()
            this.closeTag('supplierInfo')
          } else {
            // this.$message.error(res.message)
          }
        } else {
          this.$message.warning('请检查填写的信息')
        }
      })
    },
    updateScm() {
      console.log(this.scmForm)
      this.$refs.scmForm.validate(async (isOk) => {
        if (isOk) {
          const res = await updateScmInfo({ ...this.scmForm, id: this.scmId })
          console.log(res.code)
          if (res.code === 200) {
            this.$message.success('修改成功')
            this.$refs.scmForm.resetFields()
            this.closeTag('supplierInfo')
          } else {
            // this.$message.error(res.message)
          }
        } else {
          this.$message.warning('请检查填写的信息')
        }
      })
    },
    returnBtn() {
      this.closeTag('supplierInfo')
    },
    cancelBtn() {
      this.closeTag('supplierInfo')
    }
  }
}
</script>

<style lang="scss" scoped>
.flexContent1 {
  height: 100%;
  background-color: #EEEEEE;

  .form {
    height: 100%;
    // background-color: #fff;
    // padding: 32px;
    display: flex;
    flex-direction: column;

    .top {
      background-color: #fff;
      padding: 32px 32px 0 32px;
      border-radius: 6px 6px 6px 6px;
      // height: 438px;
      margin-bottom: 16px;
    }

    .center {
      // width: 100%;
      flex: 1;
      background-color: #fff;
      padding: 32px;
      border-radius: 6px 6px 6px 6px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .btnDiv {
      display: flex;
      // text-align: right;
      // padding-left: 85%;
      justify-content: end;

    }

    .basic {
      font-family: PingFang SC, PingFang SC;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 32px;
    }

    .imgUpload {
      ::v-deep .el-upload:hover {
        border-color: #409EFF;
      }

      ::v-deep .el-upload {
        position: relative;
        margin-bottom: 10px;
        margin-left: 5px;
        width: 50px;
        height: 50px;
        line-height: 20px;
        padding-top: 5px;
      }

      .txt {
        color: #595858;
        font-size: 12px;
      }

    }
  }
}

.el-upload--picture-card i {
  font-size: 12px !important;
}

.el-button--small {
  padding: 9px 0;
}

::deep el-button {
  text-align: center;
}

.map {
  width: 200px;
  height: 200px;
}

::v-deep .el-row {
  margin-bottom: 20px;
}
</style>
